<template>
  <div>
    <MyDialog></MyDialog>
    <MyDialog>显示提供的内容</MyDialog>
  </div>
</template>

<script>
/*
插槽 - 后备内容 (默认值)
通过插槽完成了内容的定制，传什么显示什么，但是如果不传，则是空白
能否给插槽设置 默认显示内容 呢?
********************************
插槽后备内容: 封装组件时，可以为预留的 <slot>插槽提供后备内容(默认内容)。
  语法:在<slot> 标签内，放置内容，作为默认显示内容
    <template>
      <div class="dialog">
        <div class="dialog-header">
          <h3>友情提示</h3>
          <span class="close">X</span>
        </div>
        <div class="dialog-content">
          <slot>我是后备内容</slot> <!--*********-->
        </div>
        <div class="dialog-footer">
          <button>取消</button>
          <button>确认</button>
        </div>
      </div>
    </template>
*/
import MyDialog from './components/MyDialog.vue'
export default {
  data () {
    return {

    }
  },
  components: {
    MyDialog
  }
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>